<script setup>
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
defineOptions({ name: 'Detail' })

const router = useRouter()
const route = useRoute()

// 如果 router 配置了 props: true，上面 route.params.id 会自动作为 prop 传入。
// 这里直接读取 route.params 演示
onMounted(() => {
  console.log('Detail mounted, id =', route.params.id)
})

function goBack() {
  // 多种返回方式示例
  // router.back()
  // router.go(-1)
  // 或者显式到命名路由
  router.push({ name: 'list' })
}
</script>

<template>
  <div>
    <h1>Detail 页面 — ID: {{ $route.params.id }}</h1>
    <p>路由全名：{{ $route.name }}</p>
    <button @click="goBack">返回到 List</button>
    <button @click="$router.back()">router.back()</button>
  </div>
</template>
